iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
自我挑戰組

輕鬆Vue一下系列 第 19

Day19-v-charts

  • 分享至 

  • xImage
  •  

在過去利用echarts生成圖表時,經常需要做繁瑣的數據類型轉化、修改複雜的配置項,但現在只要藉由v-charts,便可輕鬆生成常見的圖表,因為它的數據是一種對前後端都友好的格式,而且在圖表中的其他配置也可以透過較為簡單的方式進行設定。
1.要在html中引入cdn,並在div中建立一個ve-line物件,將其data綁定chartData變數,如下:
https://ithelp.ithome.com.tw/upload/images/20191005/20112076l2k3XeNfkQ.jpg
2.設定chartData存放的資料:
https://ithelp.ithome.com.tw/upload/images/20191005/201120764U4A4pFL95.jpg
3.結果:
https://ithelp.ithome.com.tw/upload/images/20191005/20112076IsBwIHKYdV.jpg
明日預告:v-charts/折線圖


上一篇
Day18-表格查詢
下一篇
Day20-v-charts/折線圖
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言